<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品分类</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="stylesheet" type="text/css" href="css/shopcar.css"/>
	</head>

	<body>
		<!--下面这里是头部-->
	<header class="header">
		<img src="images/index1.png" class="header-logo"/>
		<img src="images/index2.png" class="header-text"/>
	</header>
	<!--上面这里是头部-->
	<!--下面这里是底部导航-->
	<nav class="bottomNav mui-bar mui-bar-tab">
		<a href="./index.html" class="mui-tab-item">
			<img src="images/icon1.png"/>
			<span>首页</span>
		</a>
		<a href="./list.html" class="mui-tab-item">
			<img src="images/icon2.png"/>
			<span>分类</span>
		</a>
		<a href="#" class="mui-tab-item">
			<img src="images/icon33.png"/>
			<span>购物车</span>
		</a>
		<a href="#" class="mui-tab-item customBtn" id="custom">
			<img src="images/icon4.png"/>
			<span>客服</span>
		</a>
	</nav>
	<!--上面这里是底部导航-->
		
		
		<h4 class="mui-text-center shopcar-head">购物车</h4>
		
		<!--商品列表-->
		<div class="mui-content carlist">
			<h5 class="mui-content-padded mui-text-right">编辑</h5>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle mui-checkbox">
						<input class="carlist-check" name="checkbox" value="Item 2" type="checkbox" checked="false">
						<img class="carlist-img mui-block mui-col-xs-3 mui-right" src="images/goods1.png"/>
						<div class="carlist-info mui-col-xs-7 mui-right">
							<h4 class="mui-ellipsis-2">嘉实多（Castrol）极护合成机油0W-40 4L装</h4>
							<h5 class="mui-ellipsis">粘度：<span>5W-40</span>&nbsp;&nbsp;容量：4L</h5>
							<p><b>￥456</b><b class="mui-pull-right">×1</b></p>
						</div>
					</div>
				</li>
			</ul>
			<h5 class="mui-content-padded mui-text-right">编辑</h5>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle mui-checkbox">
						<input class="carlist-check" name="checkbox" value="Item 2" type="checkbox">
						<img class="carlist-img mui-block mui-col-xs-3 mui-right" src="images/goods1.png"/>
						<div class="carlist-info mui-col-xs-7 mui-right">
							<h4 class="mui-ellipsis-2">嘉实多（Castrol）极护合成机油0W-40 4L装</h4>
							<h5 class="mui-ellipsis">粘度：<span>5W-40</span>&nbsp;&nbsp;容量：4L</h5>
							<p><b>￥456</b><b class="mui-pull-right">×1</b></p>
						</div>
					</div>
				</li>
			</ul>
			<h5 class="mui-content-padded mui-text-right">编辑</h5>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle mui-checkbox">
						<input class="carlist-check" name="checkbox" value="Item 2" type="checkbox" checked="false">
						<img class="carlist-img mui-block mui-col-xs-3 mui-right" src="images/goods1.png"/>
						<div class="carlist-info mui-col-xs-7 mui-right">
							<h4 class="mui-ellipsis-2">嘉实多（Castrol）极护合成机油0W-40 4L装</h4>
							<h5 class="mui-ellipsis">粘度：<span>5W-40</span>&nbsp;&nbsp;容量：4L</h5>
							<p><b>￥456</b><b class="mui-pull-right">×1</b></p>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		<!--提交栏-->
		<div class="submitcar mui-checkbox">
			<input class="carlist-check submitcar-all" name="checkbox" value="Item 2" type="checkbox">
			<div class="submitcar-btn mui-pull-right">结算(<span>1</span>)</div>
			<div class="submitcar-totle mui-pull-right">
				<h4>合计：<span>￥456</span></h4>
				<h5 class="mui-text-right">不含运费</h5>
			</div>
		</div>
		
		<!--付款弹出框-->
		<div class="showpay-mask mui-fullscreen" style="display:none;">
			<div class="showpay-area" style="bottom:-90vh">
				<div class="mui-icon mui-icon-close closepay"></div>
				<div class="mui-card-content showpay-list">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="mui-slider-handle mui-checkbox">
								<img class="carlist-img mui-block mui-col-xs-4 mui-right" src="images/goods1.png"/>
								<div class="carlist-info mui-col-xs-8 mui-right">
									<h4 class="mui-ellipsis-2">嘉实多（Castrol）极护合成机油0W-40 4L装</h4>
									<h5 class="mui-ellipsis">粘度：<span>5W-40</span>&nbsp;&nbsp;容量：4L</h5>
									<p><b>￥456</b><b class="mui-pull-right">×1</b></p>
								</div>
							</div>
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="mui-slider-handle mui-checkbox">
								<img class="carlist-img mui-block mui-col-xs-4 mui-right" src="images/goods1.png"/>
								<div class="carlist-info mui-col-xs-8 mui-right">
									<h4 class="mui-ellipsis-2">嘉实多（Castrol）极护合成机油0W-40 4L装</h4>
									<h5 class="mui-ellipsis">粘度：<span>5W-40</span>&nbsp;&nbsp;容量：4L</h5>
									<p><b>￥456</b><b class="mui-pull-right">×1</b></p>
								</div>
							</div>
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<div class="mui-slider-handle mui-checkbox">
								<img class="carlist-img mui-block mui-col-xs-4 mui-right" src="images/goods1.png"/>
								<div class="carlist-info mui-col-xs-8 mui-right">
									<h4 class="mui-ellipsis-2">嘉实多（Castrol）极护合成机油0W-40 4L装</h4>
									<h5 class="mui-ellipsis">粘度：<span>5W-40</span>&nbsp;&nbsp;容量：4L</h5>
									<p><b>￥456</b><b class="mui-pull-right">×1</b></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			
				<div class="showpay-num">
					<h5 class="mui-pull-left">运送方式:快递 包邮</h5>
					<h4 class="mui-pull-right">
						实付款：￥1200
					</h4>
				</div>
				<div class="user-info">
					<input type="text" placeholder="姓名"/>
					<input type="number" placeholder="联系号码"/>
					<input type="text" placeholder="地址"/>
					<input type="text" placeholder="备注"/>
				</div>
				<div class="showpay-submit">
					<div class="mui-text-center">
						立即付款
					</div>
				</div>
			</div>
		</div>
		
		<!--客服咨询-->
		<div class="custom mui-fullscreen">
			<div class="custom-wrap">
				<div class="mui-icon mui-icon-close closepay" id="closeCustom"></div>
				<p class="mui-text-center mui-h4" >0771-5690224</p>
				<a class="custom-btn mui-icon mui-icon-phone-filled mui-text-center" href="tel:0771-5690224">  电话咨询</a>
				<div class="custom-line"></div>
				<img class="custom-2dcode" src="images/2dcode.png"/>
				<a class="custom-btn mui-icon mui-icon-weixin mui-text-center">  微信咨询</a>
			</div>
		</div>
		
		<!--底部页脚-->
		<footer class="footer">
			早养车超值平台·南国早报独立开发运营·合作请拨热线
		</footer>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/shopcar.js"></script>
		
	</body>

</html>
